<template>
	<view>
		<topSearch v-model:value="searchValue" @onGetSearchData="onTopSearchData"></topSearch>
		<view class="search-container">
			<text >精品名厨视频-会员专享</text>
			<vipList></vipList>
			<food-list :foodList="cookBookData.rows"></food-list>
		</view>
	</view>
</template>

<script setup>
	import vipList from '../../components/vip-list/vip-list.vue';
	import topSearch from '../../components/top-search/top-search.vue';
	import foodList from '../../components/food-list/food-list.vue';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	import {
		getSearchCookbookApi
	} from '../../../api/cookbook';

	const searchValue = ref('');
	const pageData = ref({
		currentPage: 1,
		pageSize: 20
	})
	const cookBookData = ref({
		rows: [],
		total: 0
	});
	onLoad((options) => {
		if (options.name) {
			searchValue.value = options.name;
		}
		onGetSearchData();
	});
	// 页面滑动到底部时触发
	onReachBottom(() => {
		if (cookBookData.value.rows.length >= cookBookData.value.total) {
			uni.showToast({
				title: '已经到底啦！',
				duration: 2000
			});
		} else {
			pageData.value.currentPage++;
			onGetSearchData();
		}

	});

	function onTopSearchData() {
		cookBookData.value = {
			rows: [],
			total: 0
		};
		pageData.value.currentPage = 1;
		onGetSearchData();
	}

	function onGetSearchData() {
		getSearchCookbookApi({
			value: searchValue.value,
			...pageData.value
		}).then(res => {
			if (res.code == 200) {
				cookBookData.value.rows = [
					...cookBookData.value.rows, // 保留旧数据
					...res.data.rows
				];
				cookBookData.value.total = res.data.total;
			}
		})
	}
</script>

<style scoped>
	.search-container{
		padding: 0 34rpx;
	}
</style>